<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="static/js/vue.js"></script>
</head>
<body>

    <!--1.一个容器-->
    <div id="app">

        <h1 v-for="n in nums">{{n}}</h1>
        <hr>
        <!--下标-->
        <p v-for="(n,index) in nums">{{n}}--{{index}}</p>
        <hr>
        <!--json对象-->
        <h1>json对象</h1>
        <p v-for="(v,k) in book">{{k}}--{{v}}</p>
        <h1>json对象（带下标）</h1>
        <p v-for="(v,k,i) in book">{{k}}--{{v}}--{{i}}</p>
        <h1>json数组</h1>
        <div v-for="(v,i) in books">{{v}}--{{i}}
            <p v-for="(value,k) in v">{{value}}---{{k}}</p>
        </div>

    </div>

    <!--{{username}}-->

    <script>



       // var username = $("#username").val();
        //2.创建vue的实例
       // 页面展示：helloworld!!
       //练习：用一个页面实现： 默认显示商品列，如果点了新增按钮，则显示：一个新增商品的表单。

        var app = new Vue({
            el:"#app",//vue实现的挂载点  dom的id
            //vue中的数据定义
            //1） 用户录入  2） 服务端返回的  3）静态数据
            data:{
                nums:[1,2,3,4],
                book:{name:"java入门到放弃",price:100},
                books:[{name:"java入门到放弃",price:100},{name:"java入门到放弃1",
                    price:101},{name:"java入门到放弃2",price:102}]

                //购物车
            }

        });


    </script>

</body>
</html>